<template>
  <div class="weather-container">
    <div class="search-box">
      <input v-model="cityName" placeholder="输入城市名称" />
      <button @click="getWeather">查询</button>
    </div>

    <div class="weather-info" v-if="weatherLoaded">
      <div class="current-weather">
        <h2>实时天气</h2>
        <div class="weather-detail" v-if="currentWeather">
          <div class="weather-icon">{{ getWeatherEmoji(currentWeather.text) }}</div>
          <div class="weather-main">
            <div class="city-name">{{ cityName }}</div>
            <div class="temperature">{{ currentWeather.temp }}°C</div>
          </div>
          <div class="weather-extra">
            <div class="weather-item">
              <span class="label">天气:</span>
              <span class="value">{{ currentWeather.text }}</span>
            </div>
            <div class="weather-item">
              <span class="label">风向:</span>
              <span class="value">{{ currentWeather.windDir }}</span>
            </div>
            <div class="weather-item">
              <span class="label">湿度:</span>
              <span class="value">{{ currentWeather.humidity }}%</span>
            </div>
            <div class="weather-item">
              <span class="label">降水量:</span>
              <span class="value">{{ currentWeather.precip }}mm</span>
            </div>
          </div>
        </div>
      </div>

      <div class="forecast">
        <h2>未来天气预报</h2>
        <div class="forecast-list">
          <div class="forecast-item" v-for="day in forecastWeather" :key="day.fxDate">
            <div class="forecast-date">{{ formatDate(day.fxDate) }}</div>
            <div class="forecast-temp">
              <span class="high">{{ day.tempMax }}°</span>
              <span class="low">{{ day.tempMin }}°</span>
            </div>
            <div class="forecast-weather">
              <div>白天: {{ day.textDay }} {{ getWeatherEmoji(day.textDay) }}</div>
              <div>夜间: {{ day.textNight }} {{ getWeatherEmoji(day.textNight) }}</div>
            </div>
            <div class="forecast-extra">
              <div>湿度: {{ day.humidity }}%</div>
              <div>降水量: {{ day.precip }}mm</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="loading" v-if="isLoading">
      <div class="loading-spinner"></div>
      <div>加载中...</div>
    </div>
    
    <div class="error-message" v-if="errorMsg">
      {{ errorMsg }}
    </div>
  </div>    
</template>

<script>
export default {
  data() {
    return {
      cityName: '北京',
      currentWeather: null,
      forecastWeather: [],
      weatherLoaded: false,
      isLoading: false,
      errorMsg: ''
    }
  },
  mounted() {
    // 页面加载时获取默认城市的天气
    // this.getWeather();
  },
  methods: {
    async getWeather() {
      if (!this.cityName.trim()) {
        this.errorMsg = '请输入城市名称';
        return;
      }
      
      this.errorMsg = '';
      this.isLoading = true;
      this.weatherLoaded = false;
      
      try {
        // 获取实时天气
        const currentResponse = await fetch(`https://m1.apifoxmock.com/m1/6488085-0-default/weatherNow?location=${this.cityName}`);
        const currentData = await currentResponse.json();
        
        if (currentData.code === "200") {
          this.currentWeather = currentData.now;
        } else {
          throw new Error(currentData.message || '获取实时天气失败');
        }
        
        // 获取天气预报
        const forecastResponse = await fetch('https://m1.apifoxmock.com/m1/6488085-0-default/forecast');
        const forecastData = await forecastResponse.json();
        
        if (forecastData.code === "200") {
          this.forecastWeather = forecastData.daily;
        } else {
          throw new Error(forecastData.message || '获取天气预报失败');
        }
        
        this.weatherLoaded = true;
      } catch (error) {
        this.errorMsg = '获取天气数据失败: ' + error.message;
        console.error('Weather API Error:', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    formatDate(dateString) {
      const date = new Date(dateString);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${month}月${day}日`;
    },
    
    getWeatherEmoji(weather) {
      const weatherMap = {
        '晴': '☀️',
        '多云': '⛅',
        '阴': '☁️',
        '小雨': '🌧️',
        '中雨': '🌧️',
        '大雨': '🌧️',
        '暴雨': '⛈️',
        '雷阵雨': '⛈️',
        '小雪': '❄️',
        '中雪': '❄️',
        '大雪': '❄️'
      };
      
      return weatherMap[weather] || '🌈';
    }
  }
}
</script>

<style scoped>
.weather-container {
  padding: 20px;
  border-radius: 12px;
  background-color: #f5f7fa;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

.search-box {
  display: flex;
  margin-bottom: 20px;
}

.search-box input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 8px 0 0 8px;
  font-size: 16px;
  outline: none;
}

.search-box button {
  padding: 12px 25px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.search-box button:hover {
  background-color: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(102, 177, 255, 0.5);
}

.current-weather, .forecast {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

h2 {
  color: #303133;
  border-bottom: 2px solid #ebeef5;
  padding-bottom: 10px;
  margin-top: 0;
  font-size: 20px;
}

.weather-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
}

.weather-icon {
  font-size: 50px;
  margin-right: 20px;
}

.weather-main {
  flex: 1;
}

.city-name {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.temperature {
  font-size: 36px;
  font-weight: bold;
  color: #409eff;
}

.weather-extra {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.weather-item {
  width: 50%;
  margin-bottom: 10px;
  display: flex;
}

.label {
  color: #909399;
  margin-right: 5px;
}

.value {
  color: #606266;
  font-weight: 500;
}

.forecast-list {
  display: flex;
  overflow-x: auto;
  padding: 10px 0;
}

.forecast-item {
  min-width: 150px;
  padding: 15px;
  margin-right: 15px;
  background-color: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.forecast-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.forecast-date {
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.forecast-temp {
  margin-bottom: 10px;
}

.high {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.low {
  color: #409eff;
  margin-left: 10px;
  font-size: 18px;
}

.forecast-weather {
  margin-bottom: 10px;
  color: #606266;
}

.forecast-extra {
  font-size: 14px;
  color: #909399;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: #909399;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  color: #f56c6c;
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  background-color: #fef0f0;
  border-radius: 8px;
}
</style>

